<template>
  <div class="box">
    <div class="body">
      <div class="top" style="display: flex; justify-content: space-between">
        <b> <p>电器灵感屋</p></b>
        <p style="font-size: 12px">更多灵感<van-icon name="arrow" /></p>
      </div>
      <div class="bottom">
        <ul>
          <li v-for="(v, index) in arr" :key="index">
            <img :src="v.img" alt="" />
          </li>
        </ul>
      </div>
    </div>
    <div class="img">
      <img
        src="https://m11.360buyimg.com/babel/s1170x156_jfs/t1/148623/1/31318/19757/63477abfEd13e7a7a/d13cbc4241a5947b.png.webp"
        alt=""
        style="width: 99vw; height: 12.5333vw"
      />
    </div>
  </div>
</template>

<script>
import axios from "axios";
let service = axios.create();
export default {
  data() {
    return {
      arr: [],
    };
  },
  mounted() {
    service({
      url: "http://localhost:3000/Cyberinspires",
      methed: "get",
    }).then((res) => {
      this.arr = res.data;
      // console.log(res.data);
    });
  },
};
</script>

<style scoped>
.body {
  width: 97%;
  height: 38.9333vw;
  margin-top: 8vw;
  margin: auto;
  border-radius: 2.6667vw;
  background-color: #fff;
}
.body .bottom {
  width: 100%;
  overflow: auto;
}
.body ul {
  width: 320%;
  display: flex;
  justify-content: space-around;
}
.body ul img {
  width: 22.9333vw;
  height: 25.3333vw;
}
.img {
  margin: auto;
  margin: 2.6667vw 0 2.6667vw 0;
  width: 97%;
  height: 13.8667vw;
}
</style>